<template>
    <el-main class="main-container">
        <!-- 1. 头部 -->
        <div class="header-wrapper">
            <div class="page-title">
                <div class="title-icon">
                    <i class="el-icon-s-order"></i>
                </div>
                <div>
                    <h1>订单管理中心</h1>
                    <p>实时管理和追踪所有订单状态</p>
                </div>
            </div>
            <div class="user-profile">
                <el-dropdown trigger="hover" @command="handleDropdownCommand">
                    <div class="avatar-wrapper">
                        <el-badge :value="pendingOrderCount" :max="99" :hidden="!pendingOrderCount">
                            <el-avatar class="user-avatar" :src="$store.state.user.headPicture"
                                @error="handleAvatarError">
                                <i class="el-icon-user-solid"></i>
                            </el-avatar>
                        </el-badge>
                        <div class="user-info">
                            <span class="user-name">{{ $store.state.user.name || '管理员' }}</span>
                            <span class="user-role">订单管理员</span>
                        </div>
                        <i class="el-icon-arrow-down dropdown-icon"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown" class="custom-dropdown">
                        <el-dropdown-item command="profile" icon="el-icon-user">个人资料</el-dropdown-item>
                        <el-dropdown-item command="upload" icon="el-icon-camera">更换头像</el-dropdown-item>
                        <el-dropdown-item command="settings" icon="el-icon-setting">系统设置</el-dropdown-item>
                        <el-dropdown-item divided command="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <!-- 2. 统计卡片 -->
        <div class="stats-section">
            <div class="stat-card">
                <div class="stat-icon total"><i class="el-icon-s-order"></i></div>
                <div class="stat-content">
                    <div class="stat-value">{{ total }}</div>
                    <div class="stat-label">总订单数</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon pending"><i class="el-icon-time"></i></div>
                <div class="stat-content">
                    <div class="stat-value">{{ pendingOrderCount }}</div>
                    <div class="stat-label">待处理</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon shipping"><i class="el-icon-truck"></i></div>
                <div class="stat-content">
                    <div class="stat-value">{{ shippingOrderCount }}</div>
                    <div class="stat-label">配送中</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon completed"><i class="el-icon-check"></i></div>
                <div class="stat-content">
                    <div class="stat-value">{{ completedOrderCount }}</div>
                    <div class="stat-label">已完成</div>
                </div>
            </div>
        </div>

        <!-- 3. 搜索 & 操作栏 -->
        <div class="action-section">
            <div class="search-filters">
                <el-select v-model="searchType" placeholder="搜索类型" class="search-type-select">
                    <el-option label="订单ID" value="ORDER_ID"></el-option>
                    <el-option label="快递员ID" value="COURIER_ID"></el-option>
                    <el-option label="店铺ID" value="STORE_ID"></el-option>
                </el-select>

                <el-input v-model="searchValue" placeholder="请输入搜索内容..." clearable class="search-input"
                    @clear="handleClear" @keyup.enter.native="handleSearch">
                    <i slot="prefix" class="el-icon-search"></i>
                </el-input>

                <el-select v-model="filters.status" placeholder="订单状态" clearable class="filter-select">
                    <el-option label="全部状态" value=""></el-option>
                    <el-option label="待付款" :value="0"></el-option>
                    <el-option label="待发货" :value="1"></el-option>
                    <el-option label="配送中" :value="2"></el-option>
                    <el-option label="已完成" :value="3"></el-option>
                    <el-option label="已取消" :value="4"></el-option>
                </el-select>

                <el-input v-model="filters.courierName" placeholder="快递员姓名" clearable class="filter-input">
                </el-input>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch"
                    :loading="listLoading">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
            </div>

            <div class="action-buttons">
                <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加订单</el-button>
                <el-button type="danger" icon="el-icon-delete" :disabled="!multipleSelection.length"
                    @click="handleBatchDelete">
                    批量删除 ({{ multipleSelection.length }})
                </el-button>
                <el-button type="info" icon="el-icon-download" @click="handleExport">导出数据</el-button>
            </div>
        </div>

        <!-- 4. 表格 -->
        <div class="table-section">
            <el-table v-loading="listLoading" :data="tableData" stripe
                :header-cell-style="{ background: '#fafafa', color: '#606266' }"
                @selection-change="handleSelectionChange" @row-click="handleRowClick">

                <el-table-column type="selection" width="55" align="center" />

                <el-table-column prop="id" label="订单ID" width="180" align="center">
                    <template #default="{ row }">
                        <el-tag size="small" type="info">{{ row.id }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="商品信息" min-width="200">
                    <template #default="{ row }">
                        <div class="goods-info-cell">
                            <el-image :src="row.image || '/placeholder-goods.jpg'" class="goods-image" fit="cover">
                                <div slot="error" class="image-slot"><i class="el-icon-picture"></i></div>
                            </el-image>
                            <div class="goods-details">
                                <div class="goods-name">{{ row.goodsName }}</div>
                                <div class="goods-id">商品ID: {{ row.goodsId }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="金额" width="120" align="center">
                    <template #default="{ row }">
                        <span class="price-text">¥{{ formatPrice(row.price) }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="status" label="状态" width="120" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getStatusType(row.status)" size="small">
                            {{ getStatusText(row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="receiverName" label="收货人" width="120" align="center">
                    <template #default="{ row }">
                        <div class="receiver-info">
                            <div class="receiver-name">{{ row.receiverName }}</div>
                            <div class="receiver-phone">{{ row.receiverPhone }}</div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="address" label="收货地址" min-width="200" show-overflow-tooltip>
                </el-table-column>

                <el-table-column prop="courierId" label="快递员ID" width="100" align="center">
                    <template #default="{ row }">
                        <span v-if="row.courierId">{{ row.courierId }}</span>
                        <span v-else class="no-data">未分配</span>
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" label="创建时间" width="160" align="center">
                    <template #default="{ row }">
                        <span>{{ formatDate(row.createTime) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="220" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-tooltip content="查看详情" placement="top">
                            <el-button size="mini" type="info" icon="el-icon-view" circle
                                @click.stop="handleView(row)" />
                        </el-tooltip>
                        <el-tooltip content="编辑订单" placement="top">
                            <el-button size="mini" type="primary" icon="el-icon-edit" circle
                                @click.stop="handleEdit(row)" />
                        </el-tooltip>
                        <el-tooltip content="分配快递" placement="top">
                            <el-button size="mini" type="warning" icon="el-icon-truck" circle
                                @click.stop="handleAssignCourier(row)" />
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button size="mini" type="danger" icon="el-icon-delete" circle
                                @click.stop="handleDelete(row)" />
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 5. 分页 -->
        <div class="pagination-section">
            <div class="pagination-info">共 {{ total }} 条，每页 {{ pageSize }} 条</div>
            <el-pagination background :current-page.sync="currentPage" :page-sizes="[10, 20, 50, 100]"
                :page-size.sync="pageSize" :total="total" layout="sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange" @current-change="handlePageChange">
            </el-pagination>
        </div>

        <!-- 6. 订单详情弹窗 -->
        <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="800px"
            :before-close="() => detailDialogVisible = false">
            <div v-if="currentOrder" class="order-detail">
                <div class="detail-header">
                    <h3>订单信息 #{{ currentOrder.id }}</h3>
                    <el-tag :type="getStatusType(currentOrder.status)" size="medium">
                        {{ getStatusText(currentOrder.status) }}
                    </el-tag>
                </div>

                <el-divider></el-divider>

                <div class="detail-content">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <h4>基本信息</h4>
                            <p><strong>订单ID：</strong>{{ currentOrder.id }}</p>
                            <p><strong>店铺ID：</strong>{{ currentOrder.storeId }}</p>
                            <p><strong>买家ID：</strong>{{ currentOrder.buyerId }}</p>
                            <p><strong>商品ID：</strong>{{ currentOrder.goodsId }}</p>
                            <p><strong>支付订单ID：</strong>{{ currentOrder.payOrderId || '无' }}</p>
                        </el-col>
                        <el-col :span="12">
                            <h4>时间信息</h4>
                            <p><strong>创建时间：</strong>{{ formatDate(currentOrder.createTime) }}</p>
                            <p><strong>更新时间：</strong>{{ formatDate(currentOrder.updateTime) }}</p>
                            <p><strong>发货时间：</strong>{{ formatDate(currentOrder.deliveryTime) || '未发货' }}</p>
                            <p><strong>收货时间：</strong>{{ formatDate(currentOrder.receiveTime) || '未收货' }}</p>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <h4>收货信息</h4>
                            <p><strong>收货人：</strong>{{ currentOrder.receiverName }}</p>
                            <p><strong>联系电话：</strong>{{ currentOrder.receiverPhone }}</p>
                            <p><strong>详细地址：</strong>{{ currentOrder.fullAddress }}</p>
                        </el-col>
                        <el-col :span="12">
                            <h4>配送信息</h4>
                            <p><strong>快递员ID：</strong>{{ currentOrder.courierId || '未分配' }}</p>
                            <p><strong>订单金额：</strong>¥{{ formatPrice(currentOrder.price) }}</p>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="detailDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="handleEdit(currentOrder)">编辑订单</el-button>
            </span>
        </el-dialog>

        <!-- 7. 添加/编辑订单弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="700px" :before-close="handleDialogClose"
            :close-on-click-modal="false">
            <el-form :model="orderForm" :rules="formRules" ref="orderFormRef" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="店铺ID" prop="storeId">
                            <el-input-number v-model="orderForm.storeId" :min="1" controls-position="right"
                                placeholder="请输入店铺ID" style="width: 100%"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="买家ID" prop="buyerId">
                            <el-input-number v-model="orderForm.buyerId" :min="1" controls-position="right"
                                placeholder="请输入买家ID" style="width: 100%"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="商品ID" prop="goodsId">
                            <el-input v-model="orderForm.goodsId" placeholder="请输入商品ID"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品名称" prop="goodsName">
                            <el-input v-model="orderForm.goodsName" placeholder="请输入商品名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="订单金额" prop="price">
                    <el-input-number v-model="orderForm.price" :min="0" :precision="2" :step="0.01"
                        placeholder="请输入订单金额" style="width: 100%">
                        <template slot="prepend">¥</template>
                    </el-input-number>
                </el-form-item>

                <el-form-item label="订单状态" prop="status">
                    <el-select v-model="orderForm.status" placeholder="请选择订单状态" style="width: 100%">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="快递员ID" prop="courierId">
                    <el-input-number v-model="orderForm.courierId" :min="1" controls-position="right"
                        placeholder="请输入快递员ID" style="width: 100%"></el-input-number>
                </el-form-item>

                <el-form-item label="收货人" prop="receiverName">
                    <el-input v-model="orderForm.receiverName" placeholder="请输入收货人姓名"></el-input>
                </el-form-item>

                <el-form-item label="联系电话" prop="receiverPhone">
                    <el-input v-model="orderForm.receiverPhone" placeholder="请输入联系电话"></el-input>
                </el-form-item>

                <el-form-item label="详细地址" prop="fullAddress">
                    <el-input type="textarea" v-model="orderForm.fullAddress" :rows="3"
                        placeholder="请输入详细收货地址"></el-input>
                </el-form-item>

                <el-form-item label="商品图片">
                    <el-input v-model="orderForm.image" placeholder="请输入商品图片URL"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleDialogClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmitForm" :loading="submitLoading">
                    {{ isEdit ? '保存修改' : '立即创建' }}
                </el-button>
            </span>
        </el-dialog>

        <!-- 8. 分配快递员弹窗 -->
        <el-dialog title="分配快递员" :visible.sync="assignDialogVisible" width="500px">
            <el-form :model="assignForm" label-width="100px">
                <el-form-item label="订单ID">
                    <el-input :value="currentOrder?.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="快递员ID" prop="courierId">
                    <el-input-number v-model="assignForm.courierId" :min="1" controls-position="right"
                        placeholder="请输入快递员ID" style="width: 100%"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="assignDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirmAssign" :loading="assignLoading">
                    确认分配
                </el-button>
            </span>
        </el-dialog>
    </el-main>
</template>

<script>
import {
    getOrderList,
    getOrderById,
    AddOrder,
    updateOrder,
    batchDeleteOrder,
    getOrderByImportanceKey
} from '@/api/admin/order'

export default {
    name: 'OrderManagement',
    data() {
        return {
            filters: {
                status: '',
                courierName: ''
            },
            searchType: 'ORDER_ID',
            searchValue: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            statusOptions: [
                // 0：未支付 1:已下单 2：仓库处理中 3：已揽收 4：运输中 5;派送中 6：已签收 7:待评价
                { label: '未支付', value: 0 },
                { label: '已下单', value: 1 },
                { label: '仓库处理中', value: 2 },
                { label: '已揽收', value: 3 },
                { label: '派送中', value: 4 },
                { label: '已签收', value: 5 },
                { label: '待评价', value: 6 }

            ],
            listLoading: false,
            tableData: [],
            multipleSelection: [],
            detailDialogVisible: false,
            dialogVisible: false,
            assignDialogVisible: false,
            currentOrder: null,
            isEdit: false,
            submitLoading: false,
            assignLoading: false,
            orderForm: {
                id: null,
                storeId: null,
                goodsName: null,
                status: 0,
                goodsId: '',
                buyerId: null,
                image: '',
                price: 0,
                address: '',
                courierId: null,
                fullAddress: '',
                receiverPhone: '',
                receiverName: '',
                payOrderId: ''
            },
            assignForm: {
                courierId: null
            },
            formRules: {
                storeId: [{ required: true, message: '请输入店铺ID', trigger: 'blur' }],
                buyerId: [{ required: true, message: '请输入买家ID', trigger: 'blur' }],
                goodsId: [{ required: true, message: '请输入商品ID', trigger: 'blur' }],
                goodsName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                price: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
                status: [{ required: true, message: '请选择订单状态', trigger: 'change' }],
                receiverName: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
                receiverPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                fullAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
            }
        }
    },
    computed: {
        dialogTitle() {
            return this.isEdit ? '编辑订单' : '添加新订单'
        },
        pendingOrderCount() {
            return this.tableData.filter(item => item.status === 0 || item.status === 1).length
        },
        shippingOrderCount() {
            return this.tableData.filter(item => item.status === 2).length
        },
        completedOrderCount() {
            return this.tableData.filter(item => item.status === 3).length
        }
    },
    methods: {
        // 状态相关方法
        getStatusText(status) {
            const statusMap = {
                0: '待付款',
                1: '待发货',
                2: '配送中',
                3: '已完成',
                4: '已取消'
            }
            return statusMap[status] || '未知状态'
        },
        getStatusType(status) {
            const typeMap = {
                0: 'warning',
                1: 'info',
                2: 'primary',
                3: 'success',
                4: 'danger'
            }
            return typeMap[status] || 'info'
        },

        // 格式化方法
        formatPrice(price) {
            return Number(price || 0).toFixed(2)
        },
        formatDate(date) {
            if (!date) return '-'
            return new Date(date).toLocaleString('zh-CN')
        },

        // 搜索和筛选
        handleClear() {
            this.searchValue = ''
            this.handleSearch()
        },
        async handleSearch() {
            this.listLoading = true
            try {
                if (!this.searchValue.trim()) {
                    await this.loadData()
                    return
                }
                const params = {
                    imformationWord: this.searchValue.trim(),
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    searchType: this.searchType
                }
                if (this.filters.status !== '') {
                    params.status = this.filters.status
                }
                if (this.filters.courierName) {
                    params.courierName = this.filters.courierName
                }
                const res = await getOrderByImportanceKey(params)
                if (res && res.data) {
                    this.tableData = res.data.records || []
                    this.total = res.data.total || 0
                } else {
                    this.tableData = []
                    this.total = 0
                }
                if (this.tableData.length === 0) {
                    this.$message.info('未找到相关订单')
                }
            } catch (error) {
                console.error('搜索失败:', error)
                this.$message.error('搜索失败')
                this.tableData = []
                this.total = 0
            } finally {
                this.listLoading = false
            }
        },
        async handleRefresh() {
            this.filters = { status: '', courierName: '' }
            this.searchValue = ''
            this.searchType = 'ORDER_ID'
            this.currentPage = 1
            await this.loadData()
            this.$message.success('已重置')
        },

        // 表格操作
        handleSelectionChange(selection) {
            this.multipleSelection = selection
        },
        handleRowClick(row, column, event) {
            const isCheckbox = event.target.classList.contains('el-checkbox__inner')
            const isButton = event.target.tagName === 'BUTTON'
            if (!isCheckbox && !isButton && column.property !== 'selection') {
                this.handleView(row)
            }
        },

        // 分页
        async handlePageChange(page) {
            this.currentPage = page
            await this.loadData()
        },
        async handleSizeChange(size) {
            this.pageSize = size
            this.currentPage = 1
            await this.loadData()
        },

        // 订单操作
        handleAdd() {
            this.isEdit = false
            this.resetForm()
            this.dialogVisible = true
        },
        handleEdit(row) {
            this.isEdit = true
            this.orderForm = { ...row }
            this.dialogVisible = true
        },
        handleView(row) {
            this.currentOrder = row
            this.detailDialogVisible = true
        },
        handleAssignCourier(row) {
            this.currentOrder = row
            this.assignForm.courierId = row.courierId || null
            this.assignDialogVisible = true
        },

        // 表单提交
        handleSubmitForm() {
            this.$refs.orderFormRef.validate(async (valid) => {
                if (!valid) {
                    this.$message.warning('请填写完整信息')
                    return
                }
                try {
                    this.submitLoading = true
                    const submitData = {
                        ...this.orderForm,
                        price: Number(this.orderForm.price),
                        storeId: Number(this.orderForm.storeId),
                        buyerId: Number(this.orderForm.buyerId),
                        courierId: this.orderForm.courierId ? Number(this.orderForm.courierId) : null
                    }
                    if (this.isEdit) {
                        await updateOrder(submitData)
                        this.$message.success('订单更新成功')
                    } else {
                        const res = await AddOrder(submitData)
                        if (res.data.code === 1) {
                            this.$message.success('订单添加成功')
                        } else {
                            throw new Error(res.data.msg || '添加失败')
                        }
                    }
                    this.dialogVisible = false
                    this.resetForm()
                    await this.loadData()
                } catch (error) {
                    console.error('提交失败:', error)
                    this.$message.error(error.message || (this.isEdit ? '更新失败' : '添加失败'))
                } finally {
                    this.submitLoading = false
                }
            })
        },
        async handleConfirmAssign() {
            if (!this.assignForm.courierId) {
                this.$message.warning('请输入快递员ID')
                return
            }
            try {
                this.assignLoading = true
                const updateData = {
                    ...this.currentOrder,
                    courierId: Number(this.assignForm.courierId)
                }
                await updateOrder(updateData)
                this.$message.success('快递员分配成功')
                this.assignDialogVisible = false
                await this.loadData()
            } catch (error) {
                console.error('分配失败:', error)
                this.$message.error('分配失败')
            } finally {
                this.assignLoading = false
            }
        },

        // 删除操作
        async handleBatchDelete() {
            if (this.multipleSelection.length === 0) {
                this.$message.warning('请选择要删除的订单')
                return
            }
            try {
                await this.$confirm(
                    `确定删除选中的 ${this.multipleSelection.length} 个订单吗？`,
                    '批量删除确认',
                    { type: 'warning' }
                )

                const ids = this.multipleSelection.map(item => item.id)
                await batchDeleteOrder(ids)
                this.$message.success('删除成功')
                this.multipleSelection = []
                await this.loadData()
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败')
                }
            }
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确定删除该订单吗？', '删除确认', { type: 'warning' })
                await batchDeleteOrder([row.id])
                this.$message.success('删除成功')
                await this.loadData()
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败')
                }
            }
        },

        // 工具方法
        handleDialogClose() {
            this.$confirm('确认关闭？未保存的数据将会丢失。', '提示', { type: 'warning' })
                .then(() => {
                    this.dialogVisible = false
                    this.resetForm()
                })
                .catch(() => { })
        },
        resetForm() {
            this.orderForm = {
                id: null,
                storeId: null,
                goodsName: null,
                status: 0,
                goodsId: '',
                buyerId: null,
                image: '',
                price: 0,
                address: '',
                courierId: null,
                fullAddress: '',
                receiverPhone: '',
                receiverName: '',
                payOrderId: ''
            }
            this.$nextTick(() => {
                this.$refs.orderFormRef?.clearValidate()
            })
        },
        handleExport() {
            this.$message.info('导出功能开发中...')
        },

        // 用户操作
        handleDropdownCommand(command) {
            const actions = {
                profile: () => this.$message.info('个人资料功能开发中...'),
                upload: () => this.$message.info('更换头像功能开发中...'),
                settings: () => this.$message.info('系统设置功能开发中...'),
                logout: () => this.handleLogout()
            }
            actions[command]?.()
        },
        async handleLogout() {
            try {
                await this.$confirm('确定要退出登录吗？', '退出确认', { type: 'warning' })
                this.$store.dispatch('user/logout')
                this.$router.push('/')
            } catch (error) {
                // 取消操作
            }
        },
        handleAvatarError() {
            this.$store.commit('user/UPDATE_AVATAR', '/default-avatar.png')
        },

        // 数据加载
        async loadData() {
            this.listLoading = true
            try {

                const res = await getOrderList(this.currentPage)
                if (res && res.data) {
                    if (res.data.code === 1 && res.data.data) {
                        this.tableData = res.data.data.records || []
                        this.total = res.data.data.total || 0
                    } else if (res.data.records) {
                        this.tableData = res.data.records || []
                        this.total = res.data.total || 0
                    } else {
                        this.tableData = []
                        this.total = 0
                    }
                } else {
                    this.tableData = []
                    this.total = 0
                }
            } catch (error) {
                console.error('加载数据失败:', error)
                this.$message.error('加载数据失败')
                this.tableData = []
                this.total = 0
            } finally {
                this.listLoading = false
            }
        }
    },
    async mounted() {
        await this.loadData()
    }
}
</script>

<style scoped>
/* ========== 全局样式 ========== */
.main-container {
    padding: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/* ========== 头部样式 ========== */
.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px 28px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    color: white;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.page-title h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-title p {
    margin: 4px 0 0;
    color: #909399;
    font-size: 14px;
}

.user-profile .avatar-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 12px;
    transition: all 0.3s;
}

.user-profile .avatar-wrapper:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    transform: translateY(-2px);
}

.user-avatar {
    border: 3px solid #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-weight: 600;
    color: #303133;
    font-size: 15px;
}

.user-role {
    font-size: 12px;
    color: #909399;
}

.dropdown-icon {
    color: #909399;
    transition: transform 0.3s;
}

.user-profile .avatar-wrapper:hover .dropdown-icon {
    transform: rotate(180deg);
}

/* ========== 统计卡片样式 ========== */
.stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.4s;
    animation: fadeInUp 0.6s ease-out backwards;
}

.stat-card:nth-child(1) {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.3s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.stat-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.stat-icon.total {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.pending {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.shipping {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.completed {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #303133;
    margin-bottom: 4px;
}

.stat-label {
    color: #909399;
    font-size: 14px;
    font-weight: 500;
}

/* ========== 搜索操作区域 ========== */
.action-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    flex-wrap: wrap;
    gap: 16px;
    animation: fadeIn 0.7s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.search-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
}

.search-type-select {
    width: 140px;
}

.search-input {
    width: 280px;
}

.filter-select {
    width: 150px;
}

.filter-input {
    width: 160px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ========== 表格样式 ========== */
.table-section {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    animation: fadeIn 0.8s ease-out;
}

.goods-info-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.goods-image {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: 2px solid #f0f0f0;
    transition: all 0.3s;
}

.goods-image:hover {
    transform: scale(1.1);
    border-color: #667eea;
}

.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 24px;
}

.goods-details {
    flex: 1;
}

.goods-name {
    font-weight: 600;
    color: #303133;
    margin-bottom: 6px;
    font-size: 15px;
}

.goods-id {
    font-size: 13px;
    color: #909399;
}

.price-text {
    font-weight: 700;
    color: #f56c6c;
    font-size: 18px;
}

.receiver-info {
    text-align: center;
}

.receiver-name {
    font-weight: 600;
    margin-bottom: 4px;
    color: #303133;
}

.receiver-phone {
    font-size: 13px;
    color: #909399;
}

.no-data {
    color: #c0c4cc;
    font-style: italic;
}

/* ========== 分页样式 ========== */
.pagination-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    animation: fadeIn 0.9s ease-out;
}

.pagination-info {
    color: #606266;
    font-size: 14px;
}

/* ========== 弹窗样式 ========== */
.order-detail .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.order-detail .detail-header h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
}

.detail-content h4 {
    margin: 0 0 16px 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.detail-content p {
    margin: 12px 0;
    line-height: 1.8;
    color: #606266;
}

/* ========== 响应式设计 ========== */
@media (max-width: 1400px) {
    .stats-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .header-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .action-section {
        flex-direction: column;
        align-items: stretch;
    }

    .search-filters {
        flex-direction: column;
    }

    .search-type-select,
    .search-input,
    .filter-select,
    .filter-input {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .stats-section {
        grid-template-columns: 1fr;
    }

    .page-title h1 {
        font-size: 22px;
    }
}
</style>